CSS Mantiqiy Xususiyatlari 2-daraja: Yozuv Rejimini Kengaytirilgan Qo'llab-quvvatlash Bilan Haqiqiy Global Veb Yaratish

O'n yillar davomida veb-dasturchilar maketlarni jismoniy dunyoga asoslangan lug'at yordamida yaratdilar: yuqori, past, chap, va o'ng. Biz margin-left, padding-top va border-right kabi xususiyatlarni belgiladik. Bu aqliy model veb asosan chapdan o'ngga, yuqoridan pastga yo'naltirilgan vosita bo'lganida bizga yaxshi xizmat qildi. Biroq, veb globaldir. Bu barcha tillar va madaniyatlar uchun platforma bo'lib, ularning ko'pchiligi bu oddiy yo'nalishli oqimga amal qilmaydi.

Arab va ibroniy kabi tillar o'ngdan chapga yoziladi. An'anaviy yapon va xitoy tillari vertikal ravishda, yuqoridan pastga va o'ngdan chapga yozilishi mumkin. Ushbu yozuv tizimlariga jismoniy, chapdan o'ngga CSS modelini majburlash buzilgan maketlarga, foydalanuvchining hafsalasi pir bo'lishiga va bir talay kod o'zgartirishlariga olib keladi. Aynan shu yerda CSS Mantiqiy Xususiyatlari va Qiymatlari yordamga keladi, ular jismoniy yo'nalishlardan oqimga nisbatan, mantiqiy yo'nalishlarga fundamental paradigma o'zgarishini ifodalaydi. 1-daraja poydevor qo'ygan bo'lsa, CSS Mantiqiy Xususiyatlari 2-darajasi manzarani to'ldiradi va bizga chinakam universal, yozuv rejimini hisobga oladigan foydalanuvchi interfeyslarini yaratish uchun kerakli vositalarni taqdim etadi.

Ushbu keng qamrovli qo'llanma sizni 2-daraja olib kelgan takomillashtirishlar bilan chuqur tanishtiradi. Biz asosiy tushunchalarni takrorlashdan boshlaymiz, so'ngra bo'shliqlarni to'ldiradigan yangi xususiyatlar va qiymatlarni o'rganamiz va nihoyat, bularning barchasini har qanday yozuv rejimiga muammosiz moslashadigan komponent yaratish orqali amalda qo'llaymiz. CSS maketlari haqidagi fikrlash tarzini butunlay o'zgartirishga tayyorlaning.

Qisqacha Takrorlash: Mantiqiy Xususiyatlarning Asosiy Tushunchalari (1-daraja)

2-darajadagi qo'shimchalarni qadrlashdan oldin, biz 1-daraja tomonidan qo'yilgan poydevorni puxta tushunishimiz kerak. Butun tizim ikkita asosiy tushunchaga asoslanadi: yozuv rejimi va uning natijasi bo'lgan blok va satr o'qlari.

To'rt Yozuv Rejimi

writing-mode CSS xususiyati matnning joylashish yo'nalishini belgilaydi. Biz ko'pincha standart qiymatni tabiiy deb qabul qilsak-da, sahifadagi kontent oqimini tubdan o'zgartiradigan bir nechta qiymatlar mavjud:

• horizontal-tb: Bu ko'pchilik G'arb tillari uchun standart qiymat. Matn gorizontal (satr o'qi) bo'ylab chapdan o'ngga (yoki yo'nalishga qarab o'ngdan chapga) oqadi va satrlar yuqoridan pastga (blok o'qi) joylashadi.
• vertical-rl: An'anaviy Sharqiy Osiyo tipografiyasi (masalan, yapon, xitoy) uchun ishlatiladi. Matn vertikal ravishda yuqoridan pastga (satr o'qi) oqadi va satrlar o'ngdan chapga (blok o'qi) joylashadi.
• vertical-lr: Yuqoridagiga o'xshash, ammo satrlar chapdan o'ngga (blok o'qi) joylashadi. Kamroq tarqalgan, ammo mo'g'ul yozuvi kabi ba'zi kontekstlarda qo'llaniladi.
• sidelong-rl / sidelong-lr: Bular belgilarni yonboshiga joylashtirishni xohlagan maxsus holatlar uchun mo'ljallangan. Ular umumiy veb-kontentda kamroq uchraydi.

Eng Muhim Tushuncha: Blok va Satr O'qlari

Bu tushunish uchun eng muhim tushuncha. Mantiqiy dunyoda biz "vertikal" va "gorizontal" haqida o'ylashni to'xtatib, blok va satr o'qlari nuqtai nazaridan o'ylay boshlaymiz. Ularning yo'nalishi to'liq writing-mode ga bog'liq.

• Satr o'qi - bu matnning bitta satr ichida oqadigan yo'nalishi.
• Blok o'qi - bu yangi satrlar joylashadigan yo'nalish.

Keling, bu qanday ishlashini ko'rib chiqaylik:

• Standart ingliz tilida (writing-mode: horizontal-tb): satr o'qi gorizontal, blok o'qi esa vertikal yo'nalgan.
• An'anaviy yapon tilida (writing-mode: vertical-rl): satr o'qi vertikal, blok o'qi esa gorizontal yo'nalgan.

Bu o'qlar almashishi mumkinligi sababli, width va height kabi xususiyatlar noaniq bo'lib qoladi. width - bu gorizontal o'q bo'ylab o'lchammi yoki satr o'qi bo'ylabmi? Mantiqiy xususiyatlar bu noaniqlikni hal qiladi. Endi bizda har bir o'q uchun start va end mavjud:

• block-start: Ingliz tilida "yuqori", lekin vertikal yapon tilida "o'ng".
• block-end: Ingliz tilida "past", lekin vertikal yapon tilida "chap".
• inline-start: Ingliz tilida "chap", lekin vertikal yapon tilida "yuqori".
• inline-end: Ingliz tilida "o'ng", lekin vertikal yapon tilida "past".

Jismoniy Xususiyatlarni Mantiqiy Xususiyatlarga Moslashtirish (1-daraja)

1-daraja jismoniy xususiyatlardan mantiqiy xususiyatlarga keng qamrovli moslashuvlar to'plamini taqdim etdi. Mana bir nechta asosiy misollar:

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (joylashuv uchun) → inset-inline-start / inset-inline-end
• top / bottom (joylashuv uchun) → inset-block-start / inset-block-end

1-daraja shuningdek, bizga margin-inline (start va end uchun) va padding-block (start va end uchun) kabi qulay qisqartmalarni berdi.

2-darajaga Xush Kelibsiz: Yangiliklar va Ularning Ahamiyati

1-daraja ulkan qadam bo'lsa-da, u ba'zi sezilarli bo'shliqlarni qoldirdi. float, clear va resize kabi ba'zi fundamental CSS xususiyatlarining mantiqiy ekvivalentlari yo'q edi. Bundan tashqari, border-radius kabi xususiyatlarni mantiqiy boshqarib bo'lmas edi, bu esa dasturchilarni nozik uslublash uchun jismoniy xususiyatlarga qaytishga majbur qilar edi. Bu siz maketni mantiqiy xususiyatlar bilan 90% qurishingiz mumkinligini, ammo turli yozuv rejimlari uchun hali ham jismoniy o'zgartirishlar kerak bo'lishini anglatardi, bu esa maqsadga qisman zid edi.

CSS Mantiqiy Xususiyatlari 2-darajasi bu kamchiliklarni bevosita hal qiladi. Bu radikal yangi tizimni joriy etish haqida emas, balki 1-darajada boshlangan tizimni yakunlash haqida. U bunga ikki asosiy yo'l bilan erishadi:

1. Yangi mantiqiy xususiyatlar va qiymatlarni joriy etish - o'z-o'zidan jismoniy bo'lgan eski CSS xususiyatlari uchun (masalan, float).
2. Murakkab qisqartmalar uchun mantiqiy xususiyat moslashuvlarini qo'shish - avval e'tibordan chetda qolganlar uchun (masalan, border-radius).

2-daraja bilan to'liq oqimga nisbatan uslublash tizimi haqidagi tasavvur deyarli yakunlandi, bu bizga hamma joyda, hamma uchun, xakerlik va o'zgartirishlarsiz ishlaydigan murakkab, chiroyli va mustahkam komponentlarni yaratish imkonini beradi.

Chuqur O'rganish: 2-darajadagi Yangi Mantiqiy Qiymatlar va Xususiyatlar

Keling, 2-daraja bizning dasturchi asboblar to'plamimizga olib keladigan eng ta'sirli qo'shimchalarni o'rganamiz. Bular bo'shliqlarni to'ldiradigan va haqiqatan ham universal komponent dizaynini kuchaytiradigan vositalardir.

Float va Clear: Mantiqiy Inqilob

float xususiyati yillar davomida CSS maketining asosiy toshi bo'lib kelgan, ammo uning qiymatlari, left va right, jismoniy yo'nalishning ta'rifidir. Agar siz rasmni ingliz tilidagi paragrafning left (chap) tomoniga joylashtirsangiz, u to'g'ri ko'rinadi. Ammo hujjat yo'nalishini arab tili uchun o'ngdan chapga (RTL) o'zgartirsangiz, rasm endi matn blokining "noto'g'ri" tomonida bo'ladi. U o'ng tomonda, ya'ni satrning boshida bo'lishi kerak.

2-daraja float xususiyati uchun ikkita yangi, mantiqiy kalit so'zni taqdim etadi:

• float: inline-start; Bu elementni satr yo'nalishining boshiga joylashtiradi. LTR tillarida bu chap. RTL tillarida bu o'ng. Vertikal-rl yozuv rejimida bu yuqori.
• float: inline-end; Bu elementni satr yo'nalishining oxiriga joylashtiradi. LTR da bu o'ng. RTL da bu chap. Vertikal-rl da bu past.

Xuddi shunday, kontentning joylashtirilgan elementlar atrofida o'ralishini nazorat qilish uchun ishlatiladigan clear xususiyati ham o'zining mantiqiy hamkasblarini oladi:

• clear: inline-start; Satrning boshlanish tomonidagi joylashuvlarni tozalaydi.
• clear: inline-end; Satrning tugash tomonidagi joylashuvlarni tozalaydi.

Bu o'yinni o'zgartiruvchi yangilik. Endi siz bir satr ham qo'shimcha CSS yozmasdan, har qanday til yo'nalishiga avtomatik moslashadigan klassik rasm va matnli maketlarni yaratishingiz mumkin.

Kengaytirilgan Boshqaruv: Mantiqiy `resize`

Odatda textarea da ishlatiladigan resize xususiyati foydalanuvchilarga element hajmini o'zgartirish imkonini beradi. Uning an'anaviy qiymatlari horizontal, vertical va both. Ammo vertikal yozuv rejimida "gorizontal" nimani anglatadi? Bu hali ham jismoniy gorizontal o'q bo'ylab o'lchamni o'zgartirishni anglatadi, bu esa foydalanuvchi yoki dizayner niyat qilgan narsa bo'lmasligi mumkin. Foydalanuvchi satrlarni uzunroq yoki qisqaroq qilish uchun elementni o'zining satr o'qi bo'ylab o'zgartirishni xohlashi mumkin.

2-daraja resize uchun mantiqiy qiymatlarni taqdim etadi:

• resize: inline; Satr o'qi bo'ylab o'lchamni o'zgartirishga ruxsat beradi.
• resize: block; Blok o'qi bo'ylab o'lchamni o'zgartirishga ruxsat beradi.

resize: block; ni ingliz tilidagi textarea da ishlatish foydalanuvchiga uni balandroq qilish imkonini beradi. Uni vertikal yozuv rejimida ishlatish esa foydalanuvchiga uni kengroq qilish imkonini beradi (bu blok yo'nalishi). U shunchaki ishlaydi.

`caption-side`: Jadval Sarlavhalari Uchun Mantiqiy Joylashuv

caption-side xususiyati jadvalning caption joylashuvini belgilaydi. Eski qiymatlar top va bottom edi. Yana, bular jismoniy. Agar dizaynerning maqsadi sarlavhani jadval kontentidan "oldin" joylashtirish bo'lsa, top gorizontal yozuv rejimlari uchun ishlaydi. Ammo vertical-rl rejimida blok oqimining "boshi" yuqorida emas, o'ngda joylashgan.

2-daraja mantiqiy yechimni taqdim etadi:

• caption-side: block-start; Sarlavhani blok oqimining boshida joylashtiradi.
• caption-side: block-end; Sarlavhani blok oqimining oxirida joylashtiradi.

`text-align`: Asosiy Mantiqiy Qiymat

text-align uchun start va end qiymatlari bir muncha vaqtdan beri mavjud bo'lsa-da, ular mantiqiy xususiyatlar falsafasining asosiy qismi bo'lib, takrorlashga arziydi. text-align: left; dan foydalanish RTL tillarida darhol maket muammolarini keltirib chiqaradigan keng tarqalgan xatodir. To'g'ri, zamonaviy yondashuv har doim quyidagilardan foydalanishdir:

• text-align: start; Matnni satr yo'nalishining boshiga tekislaydi.
• text-align: end; Matnni satr yo'nalishining oxiriga tekislaydi.

2-darajaning Toj Javohiri: Mantiqiy `border-radius`

Balki 2-darajadagi eng muhim va kuchli qo'shimcha bu chegara radiuslarini mantiqiy boshqarish uchun xususiyatlar to'plamidir. Ilgari, agar siz kartaning faqat "yuqori" burchaklari yumaloq bo'lishini xohlasangiz, border-top-left-radius va border-top-right-radius dan foydalanar edingiz. Bu vertikal yozuv rejimida butunlay ishlamay qoladi, chunki "yuqori" burchaklar endi start-start va end-start burchaklariga aylanadi.

2-daraja elementning to'rt burchagiga oqimga nisbatan mos keladigan to'rtta yangi uzun xususiyatni taqdim etadi. Nomlash konventsiyasi border-[blok-qirrasi]-[satr-qirrasi]-radius shaklida.

• border-start-start-radius: Blok-start va inline-start tomonlari uchrashadigan burchak.
• border-start-end-radius: Blok-start va inline-end tomonlari uchrashadigan burchak.
• border-end-start-radius: Blok-end va inline-start tomonlari uchrashadigan burchak.
• border-end-end-radius: Blok-end va inline-end tomonlari uchrashadigan burchak.

Buni dastlab tasavvur qilish qiyin bo'lishi mumkin, shuning uchun keling, buni turli yozuv rejimlari uchun xaritalashtiraylik:

`border-radius` ni `writing-mode: horizontal-tb` da (masalan, Ingliz tili) Moslashtirish

• border-start-start-radius top-left-radius ga mos keladi.
• border-start-end-radius top-right-radius ga mos keladi.
• border-end-start-radius bottom-left-radius ga mos keladi.
• border-end-end-radius bottom-right-radius ga mos keladi.

`border-radius` ni `writing-mode: horizontal-tb` va `dir="rtl"` da (masalan, Arab tili) Moslashtirish

Bu yerda satr yo'nalishi teskari.

• border-start-start-radius top-right-radius ga mos keladi. (Blok-start - yuqori, inline-start - o'ng).
• border-start-end-radius top-left-radius ga mos keladi.
• border-end-start-radius bottom-right-radius ga mos keladi.
• border-end-end-radius bottom-left-radius ga mos keladi.

`border-radius` ni `writing-mode: vertical-rl` da (masalan, Yapon tili) Moslashtirish

Bu yerda ikkala o'q ham aylantirilgan.

• border-start-start-radius top-right-radius ga mos keladi. (Blok-start - o'ng, inline-start - yuqori).
• border-start-end-radius bottom-right-radius ga mos keladi.
• border-end-start-radius top-left-radius ga mos keladi.
• border-end-end-radius bottom-left-radius ga mos keladi.

Ushbu yangi xususiyatlardan foydalanib, siz jismoniy ekranga emas, balki kontent oqimiga semantik jihatdan bog'langan burchak radiuslarini belgilashingiz mumkin. "start-start" burchagi til yoki matn yo'nalishidan qat'i nazar, har doim to'g'ri burchak bo'ladi.

Amaliy Qo'llash: Global Tayyor Komponent Yaratish

Nazariya ajoyib, lekin keling, bu amalda qanday ishlashini ko'rib chiqaylik. Biz oddiy profil kartasi komponentini yaratamiz, avval eski jismoniy xususiyatlardan foydalanib, so'ngra uni 1 va 2-darajadagi zamonaviy mantiqiy xususiyatlardan foydalanish uchun qayta ishlaymiz.

Kartada bir tomonga joylashtirilgan rasm, sarlavha, biroz matn va dekorativ chegara hamda yumaloq burchaklar bo'ladi.

"Eski" Usul: Mo'rt, Jismoniy Xususiyatlarga Asoslangan Karta

Bir necha yil oldin bu kartani qanday uslublagan bo'lishimiz mumkin:

/* --- CSS (Jismoniy Xususiyatlar) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

Standart ingliz LTR kontekstida bu yaxshi ko'rinadi. Ammo agar biz buni dir="rtl" yoki writing-mode: vertical-rl bo'lgan konteyner ichiga joylashtirsak, maket buziladi. Dekorativ chegara noto'g'ri tomonda, avatar noto'g'ri tomonda, margin noto'g'ri va yumaloq burchaklar noto'g'ri joylashgan.

"Yangi" Usul: Mustahkam, Mantiqiy Xususiyatlarga Asoslangan Karta

Endi, xuddi shu komponentni mantiqiy xususiyatlardan foydalanib qayta ishlaymiz. Biz ham 1-darajadagi, ham 2-darajadagi yangi qo'shimchalardan foydalanamiz.

/* --- CSS (Mantiqiy Xususiyatlar) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` qisqartmasi allaqachon mantiqiy! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* 2-daraja kuchi! */

  border-end-start-radius: 8px; /* 2-daraja kuchi! */

}

.logical-card .avatar {

  float: inline-start; /* 2-daraja kuchi! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Sinov va Tekshirish

Ushbu yangi CSS bilan siz komponentni har qanday konteynerga joylashtirishingiz mumkin va u avtomatik ravishda moslashadi.

• LTR kontekstida: U asl jismoniy versiyaga o'xshash ko'rinadi.
• RTL kontekstida (dir="rtl"): Avatar o'ng tomonga joylashadi, uning margini chapda bo'ladi, dekorativ chegara o'ngda bo'ladi va matn boshiga (o'ngga) tekislanadi. Yumaloq burchaklar to'g'ri, ya'ni yuqori o'ng va pastki o'ngda bo'ladi. U shunchaki ishlaydi.
• Vertikal kontekstda (writing-mode: vertical-rl): Kartaning "kengligi" (endi uning vertikal inline-size) 300px bo'ladi. Avatar "yuqoriga" (inline-start) joylashadi va uning "pastki" qismida (inline-end) margin bo'ladi. Dekorativ chegara o'ng tomonda (inline-start) bo'ladi va yumaloq burchaklar yuqori o'ng va yuqori chapda bo'ladi. Komponent hech qanday media so'rovlari yoki o'zgartirishlarsiz o'zini to'liq to'g'ri yo'naltirdi.

Brauzerlarda Qo'llab-quvvatlanishi va Zaxira Variantlari

Bularning hammasi ajoyib eshitiladi, lekin brauzerlarda qo'llab-quvvatlanish-chi? Yaxshi xabar shundaki, 1-daraja mantiqiy xususiyatlarini qo'llab-quvvatlash barcha zamonaviy brauzerlarda a'lo darajada. Siz bugunoq margin-inline-start va padding-block kabi xususiyatlardan foydalanishingiz mumkin va kerak.

Yangi 2-daraja xususiyatlarini qo'llab-quvvatlash tez sur'atlarda yaxshilanmoqda, lekin hali universal emas. float, clear va resize uchun mantiqiy qiymatlar yaxshi qo'llab-quvvatlanadi. Mantiqiy border-radius xususiyatlari eng yangi bo'lib, hali ham funksiya bayroqlari ortida yoki so'nggi brauzer versiyalarida bo'lishi mumkin. Har doimgidek, eng so'nggi muvofiqlik ma'lumotlari uchun MDN Web Docs yoki CanIUse.com kabi manbalarga murojaat qilishingiz kerak.

Progressiv Takomillashtirish Strategiyalari

CSS chidamli bo'lish uchun yaratilganligi sababli, biz eski brauzerlar uchun osongina zaxira variantlarini taqdim eta olamiz. Kaskad, agar brauzer mantiqiy xususiyatni tushunmasa, uni shunchaki e'tiborsiz qoldirib, undan oldin belgilangan jismoniy xususiyatdan foydalanishini ta'minlaydi.

Mana qanday qilib zaxira variantlariga tayyor CSS yozishingiz mumkin:

.card {

  /* Eski brauzerlar uchun zaxira variant */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Zaxira variantni bekor qiladigan zamonaviy mantiqiy xususiyat */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

Bu yondashuv barcha uchun mustahkam asosiy tajribani ta'minlaydi, shu bilan birga zamonaviy brauzerlardagi foydalanuvchilar uchun kengaytirilgan, moslashuvchan maketni taqdim etadi. Bir nechta yozuv rejimini qo'llab-quvvatlashi kerak bo'lmagan loyihalar uchun bu ortiqcha bo'lishi mumkin. Ammo har qanday global dastur, dizayn tizimi yoki tema uchun bu mustahkam va kelajakka mo'ljallangan strategiyadir.

Kelajak Mantiqiy: 2-darajadan So'ng

Jismoniy fikrlashdan mantiqiy fikrlashga o'tish zamonaviy CSSdagi eng muhim o'zgarishlardan biridir. Bu bizning uslublash tilimizni xilma-xil, global veb haqiqatiga moslashtiradi. Bu bizni mo'rt, ekranga yo'naltirilgan xakerliklardan chidamli, kontentga yo'naltirilgan dizaynga o'tkazadi.

Hali ham bo'shliqlar bormi? Bir nechta. background-position yoki gradientlar kabi xususiyatlar uchun mantiqiy qiymatlar hali ham muhokama qilinmoqda. Ammo 2-darajaning chiqarilishi bilan kundalik maket va uslublash vazifalarining katta qismini endi sof mantiqiy yondashuv yordamida bajarish mumkin.

Dasturchilar uchun harakatga chaqiruv aniq: standart sifatida mantiqiy xususiyatlardan foydalanishni boshlang. width o'rniga inline-size ni odatiy holga aylantiring. Chap va o'ng marginlarni alohida belgilash o'rniga margin-inline dan foydalaning. Bu faqat turli tillarni qo'llab-quvvatlash haqida emas; bu yaxshiroq, chidamliroq CSS yozish haqida. Mantiqiy xususiyatlar bilan qurilgan komponent o'z-o'zidan LTR, RTL yoki vertikal maketda ishlatilishidan qat'i nazar, qayta ishlatilishi mumkin va moslashuvchan bo'ladi. Bu shunchaki yaxshiroq muhandislikdir.

Xulosa: Oqimni Qabul Qiling

CSS Mantiqiy Xususiyatlari 2-darajasi shunchaki yangi xususiyatlar to'plami emas; bu bir tasavvurning yakunidir. U o'z kontentining tabiiy oqimini hurmat qiladigan maketlarni yaratish uchun zarur bo'lgan oxirgi, hal qiluvchi qismlarni taqdim etadi. float: inline-start va border-start-start-radius kabi xususiyatlarni qabul qilish orqali biz o'z mahoratimizni shunchaki qutilarni ekranda joylashtirishdan haqiqiy global, inklyuziv va kelajakka mo'ljallangan veb-tajribalarni loyihalash darajasiga ko'taramiz.

Keyingi safar yangi loyihani boshlaganingizda yoki yangi komponent yaratganingizda, margin-left deb yozishdan oldin to'xtang. O'zingizdan so'rang: "Men chap tomonni nazarda tutyapmanmi yoki boshlanishni nazarda tutyapmanmi?" Shu kichik aqliy o'zgarishni amalga oshirish orqali siz hamma joyda, hamma uchun yanada moslashuvchan va qulay veb-sayt yaratishga o'z hissangizni qo'shgan bo'lasiz.